<template>
	<!-- 公共头部 -->
	<common-head></common-head>
	<view class="content">
	<scroll-view scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollIntoViewId" :style="{ height: windowHeight + 'px' }" class="scroll-view-box">
		<view class="main1">
			<view class="main1-l">
				<view class="title">护肤评估报告</view>
				<view class="date">2024-10-30</view>
			</view>
			<image class="main1-r" src="@/static/images/img3.png" mode=""></image>
		</view>
		<view class="main2">
			<view class="name-box">Hi, Lulu</view>
			<view class="score-box">
				<view class="score-box-l">您的护肤综合评分：</view>
				<view class="score-box-r">
					<view class="score">80</view>
					<view class="total">/100</view>
					<view class="bg"></view>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" canvas2d :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="main3">
			<view class="title">你当下最关注的健康目标:</view>
			<view class="main3-bd">
				<view class="main3-bd-l item">
					<view class="img-box">
						<image class="img" src="@/static/images/icon4.png" mode=""></image>
					</view>
					<view class="txt">毛孔粗大</view>
					<view class="tips">41.65万人关注</view>
				</view>
				<view class="main3-bd-r item">
					<view class="img-box">
						<image class="img" src="@/static/images/icon5.png" mode=""></image>
					</view>
					<view class="txt">美白去黄</view>
					<view class="tips">50.82万人关注</view>
				</view>
			</view>
		</view>
		
		<view class="main4" id="scrollIntoMKCD">
			<view class="title">
				<image class="img" src="@/static/images/icon6.png" mode=""></image>
				<view class="txt">毛孔粗大</view>
				<image class="img" src="@/static/images/icon6.png" mode=""></image>
				<image class="title-box-bg" src="@/static/images/title-box-bg.png" mode=""></image>
			</view>
			<view class="item">
				<view class="option">
					<view class="option-l">01</view>
					<view class="option-r">您当前存在的毛孔问题：</view>
				</view>
				<image class="img1" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img4.png" mode="widthFix"></image>
			</view>
			<view class="item">
				<view class="option">
					<view class="option-l">02</view>
					<view class="option-r">以下是造成您毛孔粗大的主因：</view>
				</view>
				<view class="tab-hd">
					<view :class="['txt', tabOn == 1 ? 'on' : '']" @click="tabClick(1)">皮脂分泌旺盛</view>
					<view :class="['txt', tabOn == 2 ? 'on' : '']" @click="tabClick(2)">清洁不当</view>
					<view :class="['txt', tabOn == 3 ? 'on' : '']" @click="tabClick(3)">内分泌失调</view>
				</view>
				<view class="tab-bd">
					<view v-show="tabOn === 1">
						<view class="con">皮脂腺分泌过多皮脂，容易导致毛孔堵塞，进而使毛孔变大；有可能是体内激素分泌紊乱、受到病原体的感染、遗传因素等影响，也考虑是因为患者平时生活习惯不规律，经常熬夜、睡眠不足、经常压力过大、经常进食辛辣刺激的食物等，或是患者长期抽烟酗酒、使用不当的化妆品等原因，都会导致患者皮脂腺分泌旺盛。‌</view>
					</view>
					<view v-show="tabOn === 2">2</view>
					<view v-show="tabOn === 3">3</view>
				</view>
				
				<!-- 毛孔粗大「微观解析」 -->
				<view class="microscopic">
					<view class="subtitle">毛孔粗大「微观解析」</view>
					<view class="thirdtitle">改善毛孔粗问题内外两个层面解决</view>
					<view class="con-box">
						<view class="con" :style="{ '-webkit-line-clamp': clampNum}">当皮肤老旧角质积聚越多，会使肌肤变厚、变粗糙，毛孔变粗大，肌肤也因为无法顺利吸收水分与保养成分，变得暗沉、干燥，加速刺激油脂分泌量，毛孔会再度变大。此外，随着年龄的增长，皮肤逐渐失去弹性，毛囊周围缺乏支持结构，也很容易使毛孔显得比较大；外油内干的皮肤环境，也会使毛孔变得粗大。平时应该多注意皮肤的日常护养。当皮肤老旧角质积聚越多，会使肌肤变厚、变粗糙，毛孔变粗大，肌肤也因为无法顺利吸收水分与保养成分，变得暗沉、干燥，加速刺激油脂分泌量，毛孔会再度变大。此外，随着年龄的增长，皮肤逐渐失去弹性，毛囊周围缺乏支持结构，也很容易使毛孔显得比较大；外油内干的皮肤环境，也会使毛孔变得粗大。平时应该多注意皮肤的日常护养。</view>
						<view class="seemore" @click="hangleSeemore" v-if="showSeemore">
							<text class="txt">展开更多</text>
							<image class="img" src="@/static/images/seemore.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="option">
					<view class="option-l">03</view>
					<view class="option-r">建议使用以下产品来改善此类问题:</view>
				</view>
				<swiper class="banner" :circular="true" :autoplay="true" :interval="5000" indicator-dots>
					<swiper-item v-for="item in list" :key="item.id" >
						<image mode="widthFix" class="img" :src="item.url"></image>
					</swiper-item>
				</swiper>
				<view class="banner-tips">* 数据来源于Jiaselin皮肤需求体验活动反馈</view>
			</view>
		</view>
		
		<view class="main4 main5" id="scrollIntoMBQH">
			<view class="title">
				<image class="img" src="@/static/images/icon6.png" mode=""></image>
				<view class="txt">美白去黄</view>
				<image class="img" src="@/static/images/icon6.png" mode=""></image>
				<image class="title-box-bg" src="@/static/images/title-box-bg.png" mode=""></image>
			</view>
			<view class="item">
				<view class="option">
					<view class="option-l">01</view>
					<view class="option-r">您当前存在的毛孔问题：</view>
				</view>
				<image class="img1" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img5.png" mode="widthFix"></image>
			</view>
			<view class="item">
				<view class="option">
					<view class="option-l">02</view>
					<view class="option-r">以下是造成您皮肤发黄的主因：</view>
				</view>
				<view class="tab-hd">
					<view :class="['txt', tabOn2 == 1 ? 'on' : '']" @click="tabClick2(1)">经常熬夜</view>
					<view :class="['txt', tabOn2 == 2 ? 'on' : '']" @click="tabClick2(2)">饮食因素</view>
				</view>
				<view class="tab-bd">
					<view v-show="tabOn2 === 1">
						<view class="con">如果在平时的生活当中有长期熬夜或睡眠不足的情况，没有得到充足的休息时间，肝胆得不到充分的休息，会使身体和皮肤的循环代谢变得缓慢，容易导致体内囤积较多的废物废气，毒素会在表皮积聚，如果不能正常排出，可能会导致皮肤出现暗黄和粗糙的情况，也会引起长色斑。‌</view>
					</view>
					<view v-show="tabOn2 === 2">2</view>
				</view>
				
				<!-- 「微观解析」 -->
				<view class="microscopic">
					<view class="subtitle">皮肤发黄「微观解析」</view>
					<view class="thirdtitle">保持皮肤美白，肌肤灌注至臻护理</view>
					<view class="con-box">
						<view class="con" :style="{ '-webkit-line-clamp': clampNum2}">当皮肤老旧角质积聚越多，会使肌肤变厚、变粗糙，毛孔变粗大，肌肤也因为无法顺利吸收水分与保养成分，变得暗沉、干燥，加速刺激油脂分泌量，毛孔会再度变大。此外，随着年龄的增长，皮肤逐渐失去弹性，毛囊周围缺乏支持结构，也很容易使毛孔显得比较大；外油内干的皮肤环境，也会使毛孔变得粗大。平时应该多注意皮肤的日常护养。当皮肤老旧角质积聚越多，会使肌肤变厚、变粗糙，毛孔变粗大，肌肤也因为无法顺利吸收水分与保养成分，变得暗沉、干燥，加速刺激油脂分泌量，毛孔会再度变大。此外，随着年龄的增长，皮肤逐渐失去弹性，毛囊周围缺乏支持结构，也很容易使毛孔显得比较大；外油内干的皮肤环境，也会使毛孔变得粗大。平时应该多注意皮肤的日常护养。</view>
						<view class="seemore" @click="hangleSeemore2" v-if="showSeemore2">
							<text class="txt">展开更多</text>
							<image class="img" src="@/static/images/seemore.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="option">
					<view class="option-l">03</view>
					<view class="option-r">建议使用以下产品来改善此类问题:</view>
				</view>
				<swiper class="banner" :circular="true" :autoplay="true" :interval="5000" indicator-dots>
					<swiper-item v-for="item in list2" :key="item.id" >
						<image mode="widthFix" class="img" :src="item.url"></image>
					</swiper-item>
				</swiper>
				<view class="banner-tips">* 数据来源于Jiaselin皮肤需求体验活动反馈</view>
			</view>
		</view>
	</scroll-view>
	</view>
	
	<!-- 右侧固定导航 -->
	<view class="right-fix">
		<!-- <view class="item item1 on">毛孔粗大</view>
		<view class="item item2">美白去黄</view> -->
		<view :class="['item', 'item' + item.id, item.state ? 'on' : '' ]" v-for="item in condata" :key="item.id" @click="handleRightItem(item)">{{item.name}}</view>
	</view>
	
	<!-- 底部固定 -->
	<view class="foot-fix">
		<view class="share-btn btn">分享报告</view>
		<view class="look-btn btn" @click="clickJump('/pages/report/scheme')">查看我的方案</view>
	</view>
	
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	
	// 手机可视高度
	let windowWidth = ref(0)
	let windowHeight = ref(0)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (res) {
				windowWidth.value = res.windowWidth;   // 窗口宽度
				windowHeight.value = res.windowHeight; // 窗口高度
			}
		});
	});

	let opts = ref({
		title: {
			name: ""
		},
		subtitle: {
			name: ""
		},
		extra:{
			ring:{
				ringWidth: 20
			}
		}
	})
	let chartData = ref({
		series: [{
			data: [{"name":"毛孔","value":25},{"name":"美白","value":75}]
		}]
	})
	
	
	let condata = ref([
		{
			id: 1,
			state: true,
			name: '毛孔粗大'
		},
		{
			id: 2,
			state: false,
			name: '美白去黄'
		}
	])
	// 右边固定导航
	let scrollIntoViewId = ref('')
	let handleRightItem = (item) => {
		// 切换样式
		condata.value.forEach((ele, index) => {
			if(ele.id == item.id){
				ele.state = true
			}else{
				ele.state = false
			}
		})
		// 跳转到对应的ID锚点
		if(item.id == 1){
			scrollIntoViewId.value = 'scrollIntoMKCD'
		}else{
			scrollIntoViewId.value = 'scrollIntoMBQH'
		}
	}
	
	
	let list  = ref([
		{
			id: 1,
			url: 'https://build.gzwhir.com/zygzmr202410252905/appImages/report-info.png'
		},
		{
			id: 2,
			url: 'https://build.gzwhir.com/zygzmr202410252905/appImages/report-info.png'
		}
	])
	let list2  = ref([
		{
			id: 1,
			url: 'https://build.gzwhir.com/zygzmr202410252905/appImages/report-info2.png'
		},
		{
			id: 2,
			url: 'https://build.gzwhir.com/zygzmr202410252905/appImages/report-info2.png'
		}
	])
	
	
	let tabOn = ref(1)
	let tabClick = (val) =>{
		tabOn.value = val
	}
	
	// 展开更多
	let clampNum = ref(6)
	let showSeemore = ref(true)
	let hangleSeemore = () => {
		clampNum.value = 99
		showSeemore.value = false
	}
	
	let tabOn2 = ref(1)
	let tabClick2 = (val) =>{
		tabOn2.value = val
	}
	
	// 展开更多
	let clampNum2 = ref(6)
	let showSeemore2 = ref(true)
	let hangleSeemore2 = () => {
		clampNum2.value = 99
		showSeemore2.value = false
	}
	
	let clickJump = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style lang="scss">

.content {
	padding: 0 40rpx;
}
.scroll-view-box{
	scrollbar-width: none;
}
.main1 {
	padding: 70rpx 0rpx 50rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.main1-l {
		.title {
			font-size: 52rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.date {
			font-size: 24rpx;
			color: #555;
			font-weight: 100;
		}
	}

	.main1-r {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120px;
	}
}

.main2 {
	background: #fff;
	border-radius: 10rpx;
	padding: 30rpx;

	.name-box {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.score-box {
		display: flex;
		align-items: baseline;
		margin-top: -20rpx;

		.score-box-l {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}

		.score-box-r {
			display: flex;
			align-items: baseline;
			position: relative;
			z-index: 1;

			.score {
				font-size: 70rpx;
				color: #333;
				font-weight: bold;
			}

			.total {
				font-size: 24rpx;
				color: #555;
			}

			.bg {
				width: 100%;
				height: 10rpx;
				background: #aae9f2;
				position: absolute;
				left: 0;
				bottom: 12rpx;
				z-index: -1;
			}
		}
	}
	.charts-box{
		width: 100%;
		height: 280px;
	}
}

.main3 {
	background: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	margin-top: 20rpx;
	
	.title{
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.main3-bd{
		display: flex;
		align-items: center;
		justify-content: space-around;
		.item{
			text-align: center;
			width: 49%;
			
			.img-box{
				width: 90rpx;
				height: 90rpx;
				border-radius: 90px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
			}
			&.main3-bd-l{
				border-right: 1px solid #e8e8e8;
				.img-box{
					background: #f5dfdf;
					.img{
						width: 46rpx;
						height: 29rpx;
					}
				}
			}
			&.main3-bd-r{
				.img-box{
					background: #c6edf2;
					.img{
						width: 39rpx;
						height: 46rpx;
					}
				}
			}
			
			.txt{
				font-size: 28rpx;
				color: #333;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
			}
			.tips{
				font-size: 24rpx;
				color: #888;
			}
		}
	}
}

.main4{
	
	.title{
		width: 280rpx;
		height: 100rpx;
		border-radius: 100px;
		background: linear-gradient(to right, #f5dfdf, #fff7f7);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 80rpx auto;
		position: relative;
		
		.txt{
			font-size: 42rpx;
			color: #333;
			font-weight: bold;
			padding: 0 16rpx;
		}
		.img{
			width: 19rpx;
			height: 17rpx;
		}
		.title-box-bg{
			position: absolute;
			left: 0;
			bottom: -36rpx;
			width: 276rpx;
			height: 37rpx;
		}
	}
	.item{
		margin-bottom: 100rpx;
		.option{
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.option-l{
				width: 40rpx;
				height: 40rpx;
				border-radius: 40px;
				background: #333;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #fff;
				margin-right: 20rpx;
			}
			.option-r{
				flex: 1;
			}
		}
		.img1{
			width: 100%;
		}
		
		.tab-hd{
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 100rpx;
			line-height: 100rpx;
			
			.txt{
				font-size: 28rpx;
				color: #888;
				position: relative;
				
				&.on{
					color: #333;
					font-weight: bold;
					background: url("@/static/images/bg2.png") no-repeat left 62rpx;
					background-size: contain;
				}
			}
		}
		.tab-bd{
			background: #fff;
			padding: 40rpx 30rpx;
			background: linear-gradient(to bottom, #fefafa, #fff);
			border: 1px solid #fff;
			.con{
				font-size: 24rpx;
				color: #333;
				line-height: 42rpx;
			}
		}
		
		.microscopic{
			background: #fff;
			padding: 0rpx 30rpx;
			margin-top: 40rpx;
			border-radius: 10rpx;
			
			.subtitle{
				width: 340rpx;
				height: 76rpx;
				background: #f5dfdf;
				border-radius: 0 0 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 40rpx;
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
			.thirdtitle{
				font-size: 30rpx;
				color: #333;
				margin-bottom: 30rpx;
			}
			.con-box{
				padding-bottom: 80rpx;
				position: relative;
				
				.con{
					font-size: 24rpx;
					line-height: 42rpx;
					color: #888;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
				}
				
				.seemore{
					display: flex;
					align-items: baseline;
					justify-content: center;
					padding-top: 80rpx;
					background: linear-gradient(to top, #fff 45%, transparent);
					position: absolute;
					left: 0;
					bottom: 10%;
					width: 100%;
					
					.txt{
						font-size: 24rpx;
						color: #333;
						margin-right: 8rpx;
					}
					.img{
						width: 15rpx;
						height: 15rpx;
					}
				}
			}
			
		}
		
		.banner{
			width: 670rpx;
			height: 875rpx;
			
			.img{
				width: 670rpx;
				height: 875rpx;
			}
		}
		.banner-tips{
			font-size: 24rpx;
			color: #888;
			text-align: center;
			margin-top: 30rpx;
		}
	}
}

.main5{
	padding-bottom: 100rpx;
	
	.title{
		background: linear-gradient(to right, #c6edf2, #edfcfe);
	}
	.item{
		.tab-hd{
			.txt{
				&.on{
					background: url("@/static/images/bg1.png") no-repeat left 62rpx;
					background-size: contain;
				}
			}
		}
		.tab-bd{
			background: linear-gradient(to bottom, #e0f5f8, #fff);
		}
		.microscopic{
			.subtitle{
				background: #c6edf2;
			}
		}
	}
	
}

// 右侧固定导航
.right-fix{
	position: fixed;
	right: 0;
	top: 30%;
	width: 200rpx;
	
	.item{
		width: 170rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #555;
		font-size: 24rpx;
		border-radius: 70px 0 0 70px;
		margin-bottom: 20rpx;
		background: #ebebeb;
		float: right;
	}
	.item1.on{
		background: #f5dfdf;
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		width: 200rpx;
		height: 90rpx;
	}
	.item2.on{
		background: #c6edf2;
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		width: 200rpx;
		height: 90rpx;
	}
}

.foot-fix{
	height: 170rpx;
	width: 100%;
	padding: 0 40rpx;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	
	.btn{
		height: 90rpx;
		border-radius: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}
	.share-btn{
		width: 260rpx;
		background: #f5f5f5;
	}
	.look-btn{
		width: 390rpx;
		background: #aae9f2;
	}
}

</style>